/* 
  语法： const [状态变量，更新状态的函数] = useState(初始值)
  步骤：
    1.useState可以调用多次，声明多个状态
    2.useState可以声明任意数据类型
    3.更新状态，还是新值覆盖旧值
    规范写法：const [状态变量名， set驼峰变量名] = useState(初始值)
*/

// 1. 导入 useState钩子函数： 声明状态
import React, { useState } from 'react';

export default function App() {
  // 2. 调用钩子函数
  // 返回值是一个数组--[状态变量，更新状态的函数]
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('我是字符串');
  const [list, setList] = useState([1, 2, 3]);
  const [obj, setObj] = useState({ name: '马云', age: 18 });

  return (
    <div>
      {/* 展示状态值 */}
      <h3>{count}</h3>
      {/* setCount()调用传参，直接传递具体数据即可，不需要包裹成对象 */}
      <button onClick={() => setCount(count + 1)}>点我+1</button>
      {/* 每点击一次加一个：啊 */}
      <div onClick={() => setMsg(msg + '啊')}>{msg}</div>
      {/* 一定是新值覆盖旧值 */}
      <div onClick={() => setList([...list, 4])}>{list}</div>
      <div onClick={() => setObj({ ...obj, name: obj.name + '1' })}>
        {obj.name}
      </div>
      <div onClick={() => setObj({ ...obj, name: obj.name + '1' })}>
        {/* 转成字符串显示 */}
        {JSON.stringify(obj)}
      </div>
    </div>
  );
}
